<template>
  <div id="item">
    <h3>{{ title }}</h3>
    <!-- 谁使用这个插槽games数据就传给谁,但是使用者必须使用template标签进行包裹,再使用scope='自定义名字'，这个自定义名字，就是收到的数据但是为一个对象{'slotData':传递的数据}，自定义名字.slotData这样才能使用数据，
    使用对象接收这样可以传递多个数据-->

    <!-- 使用者自定义结构，并且数据在另一个组件里时使用 -->
    <slot :slotData="games" msg="hello"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
    };
  },
};
</script>

<style scoped>
#item {
  width: 200px;
  height: 300px;
  background-color: skyblue;
}
h3 {
  text-align: center;
  background-color: yellowgreen;
}
</style>